<template>
	<view class="item">
		<view class="left "><image :src="curData.preview_img" mode="aspectFill"></image></view>
		<view class="content">
			<view class="title">{{ curData.title }}</view>
			<view class="delivery-time  ">
				<view class="play-x">
					<u-icon name="play-circle" size="32"></u-icon>
					{{ curData.click_num }}
				</view>
				<view>{{ $u.timeFormat(curData.create_date) }}</view>
				<view class="thumb-x">
					<u-icon name="thumb-up" size="32"></u-icon>
					<u-badge is-center :count="curData.hot_num" size="mini" type="warning"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'lg-dynamic-item',
	props: ['data', 'index'],
	watch: {
		data(v) {
			this.curData = v;
		},
		index(v) {
			this.curIndex = index;
		}
	},
	data() {
		return {
			curData: this.data,
			curIndex: this.index
		};
	}
};
</script>

<style lang="scss" scoped>
.item {
	display: flex;
	margin: 20rpx 0 0;
}
.left {
	margin-right: 20rpx;
	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
}
.content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.title {
		font-size: 28rpx;
		line-height: 50rpx;
	}
	.type {
		margin: 60rpx 0;
	}
	.delivery-time {
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
	}

	.thumb-x {
		display: inline-block;
		height: 35rpx;
		width: 35rpx;
		position: relative;
	}
}
</style>
